<template>
	<view>
		<map :scale='15' id="myMap"  style="width: 100%;height: 600rpx;"
		:markers="markers"  :longitude="longitude" :latitude="latitude" @tap="onTap"></map>
		<view class="select-box">
			<input class="search" placeholder="搜索地点" @input="filterAdd" />
		</view>
			<scroll-view scroll-y :style="{height: screenHeight + 'rpx'}">
				<view class="select-box" v-if="list.length > 0">
					<view class="item r-nw-sb-c" :class="currentIndex === index ? 'item-active' : ''" v-for="(item, index) in list" :key="item.id" @click="changeAdd(item, index)">
						<view class="c-c-fs">
							<view class="title">{{item.title}}</view>
							<view class="title-sub">{{item._distance}}m | {{item.ad_info.city}}{{item.ad_info.district}}</view>
						</view>
						<view class="btn c-c-c" v-show="currentIndex === index" @click="goToIndex(item)">
							确认
						</view>
					</view>
				</view>
				<view class="none c-c-c" v-else>
					暂无数据~
				</view>
			</scroll-view>
	</view>
</template>

<script>
	import QQMapWX from "@/utils/qqmap-wx-jssdk.min.js";
	// 腾讯地图Api
	const qqmapsdk = new QQMapWX({
		key: '2RPBZ-DM6LM-YNT6G-65KR3-QJHM5-KUBBG'  //这里填写自己申请的key
	});
	export default {
		name:"map",
		data() {
			return {
				latitude: 39.9,
				longitude: 116.4,
				markers:[], //标记点
				list: [],
				currentIndex: -1,
				screenHeight: 0,
				allList: [],
				checkedAdd: ''
			};
		},
		onLoad() {
			this.screenHeight = wx.getSystemInfoSync().windowHeight - 26;
		},
		onShow() {
			this.checkedAdd = uni.getStorageSync('address');
			if(this.checkedAdd) {
				let location = uni.getStorageSync('location');
				this.addMaekers(location.longitude, location.latitude);
				this.loadCity(location.longitude, location.latitude);
			}else {
				this.getLocationInfo();
			}
		},
		methods: {
			// 获取地理位置
			async getLocationInfo() {
				let that = this;
				await uni.getLocation({
					type: "gcj02",
					success(res) {
						let {longitude, latitude} = res;
						that.addMaekers(longitude, latitude);
						that.loadCity(longitude, latitude);
					},
				})
			},
			// 点击调起地图查看位置
			onTap(event) {
				const that = this;
				that.currentIndex = -1;
				let {latitude, longitude} = event.detail;
				that.latitude = latitude;
				that.longitude = longitude;
				that.addMaekers(longitude, latitude);
				that.loadCity(longitude, latitude);
			},
			// 添加标记
			addMaekers(longitude, latitude) {
				this.markers = [{
					id: 1,
					width: 48,
					height: 48,
					latitude,
					longitude,
					iconPath: '../../static/image/marker.png',
				}]
			},
			// 位置逆解析
			loadCity(longitude, latitude) {
				let that = this;
				let location = {
					longitude,
					latitude
				};
				 qqmapsdk.reverseGeocoder({
					location,
					get_poi: 1,
					success(response) {
						let info = response.result;
						that.latitude = location.latitude
						that.longitude = location.longitude
						that.getInfo(info);
					},
				 });
			},
			// 周边信息
			getInfo(info) {
				this.allList = info.pois;
				this.list = this.allList;
				if(this.checkedAdd) {
					this.checkedAddress();
				} else {
					this.currentIndex = -1;
				}
			},
			// 选择地点(点击item, 只是标红，出现确认按钮)
			changeAdd(item, index){
				this.currentIndex = index;
				this.latitude = item.location.lat;
				this.longitude =  item.location.lng;
				this.addMaekers(this.longitude, this.latitude);
				// uni.setStorageSync('address',item.title);
				let location = {
					latitude: this.latitude,
					longitude: this.longitude
				}
				uni.setStorageSync('location', location);
			},
			// 查找
			filterAdd(e) {
				let value = e.detail.value;
				let that = this;
				if(value) {
					this.currentIndex = -1;
					qqmapsdk.search({
						keyword: value,//搜索周边poi，比如：“酒店” “餐饮” “娱乐” “学校” 等等
						page_size: 20, //每页条目数，最大限制为20条，默认值10
						location: that.latitude + ',' + that.longitude,//①String格式：lat<纬度>,lng<经度>
						success: function(res) { //搜索成功后的回调
							that.list = res.data;
						},
						fail: function(res) {}
					});
				} else {
					this.list = this.allList;
				}
				// this.checkedAddress();
			},
			// 已选中地址高亮
			checkedAddress() {
				this.checkedAdd = uni.getStorageSync('address');
				if(this.list.length > 0) {
					this.list.forEach((item, index) => {
						if(item.title === this.checkedAdd) {
							this.currentIndex = index;
							this.changeAdd(item, index);
						}
					})
				}
			},
			// 确认选择地点，跳转首页
			goToIndex(item) {
				uni.setStorageSync('address', item.title);
				uni.setStorageSync('city', item.ad_info.city);
				uni.switchTab({url: '/pages/index/index'});
			}
		}
	}
</script>

<style lang="scss">
	.select-box {
		padding: 20rpx;
		background-color: #fff;
		.search {
			padding-left: 20rpx;
			width: 690rpx;
			height: 60rpx;
			border-radius: 15rpx;
			background-color: rgb(235,235,235);
			caret-color: #999;
		}
	}
	.item {
		padding: 12rpx 10rpx;
		font-weight: 400;
		border-bottom: 1rpx solid #c6c6c6;
		box-sizing: border-box;
		&:last-child {
			border-bottom: 0;
		}
		.title {
			font-size: 28rpx;
			color: rgb(51, 51, 51);
		}
		.title-sub {
			margin-top: 8rpx;
			color: #999;
			font-size: 24rpx;
		}
		.btn {
			width: 90rpx;
			height: 50rpx;
			background-color: #FF7F00;
			font-family: PingFangSC, PingFang SC;
			font-size: 28rpx;
			color: #FFFFFF;
			text-align: center;
			font-style: normal;
			border-radius: 10rpx;
		}
	}
	.item-active {
		.title {
			color: #FF0E25;
		}
		.title-sub {
			color: #FF0E25;
		}
	}
	.none {
		text-align: center;
		height: 100%;
	}
</style>